<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div id="hymapmain">
    <div class="abstatic-height"></div>
    <div class="map-mode-pannel" :class="{'map-pannel-show':isSelectMode}">
<!--      地名变色  :viewMode='vmode'  -->
<!--      地图3D  :viewMode='vmode' 和   :pitch="vrotate"   息息相关     -->
      <el-amap vid="hyamap" ref="map" resizeEnable='true' :plugin="plugin" :amap-manager="amapManager" :center="center" :zooms="zooms" :zoom="zoom" :events="events" class="mapset" :viewMode='vmode' :pitch="vrotate" >
        <el-amap-circle v-for="(marker,index) in markers"
                        :key="'as'+index"
                        :center="marker.position"
                        :radius="marker.protectionRadius"
                        strokeOpacity="0"
                        fillColor="#2683f5"
                        fill-opacity="0.6"
                        :visible="showCircle"
                        :events="marker.events">

        </el-amap-circle>

       <el-amap-marker v-for="(marker, index) in markers" :key="'bs'+marker.id" :position="marker.position" :vid="index" :id="marker.id">
          <div class="hymap-marker-wrap">
            <div class="hymain-map-marker" :class="{'hymain-map-marker__abnormal': marker.status=='0', 'hymain-map-marker__normal': marker.status=='2'}" @click="showSensor(marker.id)">
              <icon-svg icon-class="xiaofangshuan" style="fill:#ffffff" />
            </div>

          </div>
        </el-amap-marker>
      </el-amap>
    </div>
    <!-- 列表模式 -->
    <div class="list-mode-pannel" :class="{'list-pannel-show':!isSelectMode}">
      <el-scrollbar style="height: 100%;">
        <maphyrantList :loadData="!isSelectMode" @showSensor="showSensor"></maphyrantList>
      </el-scrollbar>
    </div>
    <div class="hymap-tool">
      <div class="map-tool__right" :class="{toolspannel:isExpand}">
        <div class="map-tool-rightwrap">
          <div class="line-with-verticl" style="border-bottom: 1px solid #50E3C2;opacity: 0.7"></div>
          <div class="all-sensor-list line-with-verticl">
            <div class="all-sensor-list__item all-sensor-line">
              <p class="title">故障设备（个）</p>
              <p class="count" v-if="totalStatus" style="color: #F5A623">{{totalStatus.faultCount}}</p>
              <p class="count" v-else>-</p>
            </div>
            <div class="all-sensor-list__item">
              <p class="title">正常设备（个）</p>
              <p class="count" v-if="totalStatus" style="color: #50E3C2">{{totalStatus.normalCount}}</p>
              <p class="count" v-else>-</p>
            </div>
          </div>
          <!--消火栓只有未处理故障列表-->
          <h4 style="font-size: 16px;color: #50E3C2;font-weight: normal;">未处理故障</h4>
          <div class="untreated-list" v-loading="loading">
            <div class="wrap-with-halfboder"></div>
            <div v-if="unhandleItems.length>0" style="height:100%">
              <el-scrollbar style="height:100%">
                <dl class="untreated-list-item" v-for="item in unhandleItems" :key="item.id">
                  <dt style="padding-left: 20px; cursor: pointer" @click="showSensor(item.fireCockId)">{{item.hydrantName}}
<!--                    @click="showSensor(item.id)"-->
<!--                    <span class="icon-nf-copy">-->
<!--                <icon-svg icon-class="copy" style="fill:#dfdfdf"/>-->
<!--                <em @click="handleCopy(item.logId,$event)" class="icon-nf-copy-btn"></em>-->
<!--                </span>-->
                  </dt>
                  <dd class="untreated-detail">
                    <div class="untreated-sensor-detail">
                      <div class="status-name">{{item.alrmType}}</div>
                      <div v-if="item.measuringPoint" class="measuringPoint">{{item.measuringPoint}}</div>
                      <div class="unit">{{item.alrmData}}{{item.dataUnit}}</div>
                    </div>
                  </dd>
                  <dd class="untreated-pain">设备系列:{{item.equipmentType}}</dd>
                  <dd class="untreated-pain">设备位置:{{item.positionDescription}}</dd>
                  <dd class="untreated-pain">报警时间:{{item.date}}</dd>
                  <dd class="untreated-handle">
                    <el-button type="text" @click="handleRows(item.id)"><i style="margin-right: 5px"><icon-svg icon-class="chuli" style="fill:#50E3C2"/></i>处理</el-button>
                  </dd>
                </dl>
                <div class="loadmore-btn-goto" v-if="unhandleItems.length>=20">
                  <el-button type="text" @click="checkMore">查看更多</el-button>
                </div>
              </el-scrollbar>
            </div>
            <div v-else>
              <p class="none-list">暂无未处理故障</p>
            </div>
          </div>
        </div>
        <div class="tool-wrap line-with-verticl" :class="{'map-width-select':!isSelectMode}">
          <div class="over-topline line-with-verticl"></div>
          <div class="tool-wrap-items">
            <div class="map-listchange__mode" :class="{'map-mode-select':isSelectMode}" @click="changeMode('map')"><i class="icon-map-location"><icon-svg icon-class="ditumoshi" /></i>地图模式</div>
            <div class="map-listchange__mode" :class="{'list-mode-select':!isSelectMode}" @click="changeMode('list')"><i class="class-icon-san"><icon-svg icon-class="listview" /></i>列表模式</div>
            <div @click="handleCommand('showtrafic')" class="map-tool-item" v-show="isSelectMode">
              <i class="dropdwon-svg-icon">
                <icon-svg icon-class="lukuang" style="fill:rgba(255, 255, 255, 0.7)" />
              </i>路况</div>
<!--            <div @click="handleCommand('showpich')" class="map-tool-item" v-show="isSelectMode">-->
<!--              <i class="dropdwon-svg-icon">-->
<!--                <icon-svg icon-class="ceju" style="fill:rgba(255, 255, 255, 0.7)" />-->
<!--              </i>测距-->
<!--            </div>-->
            <div @click="handleCommand('showcircle')" class="map-tool-item" v-show="isSelectMode" style="padding: 0">
              <i class="dropdwon-svg-icon">
                <icon-svg icon-class="fanwei" style="fill:rgba(255, 255, 255, 0.7)" />
              </i>保护范围
            </div>
            <div class="map-bshow-wrap" v-show="isSelectMode">
              <span>
                <i class="css-icon-warning"><icon-svg icon-class="xiaofangshuan" style="fill:#ffffff" /></i>故障
              </span>
                  <span>
                <i class="css-icon-breakdown"><icon-svg icon-class="xiaofangshuan" style="fill:#ffffff" /></i>正常
              </span>
            </div>
            <div class="map-search" v-show="isSelectMode" style="padding-left: 10px">
              <el-dropdown @command="selectHandle">
                <span class="el-dropdown-link">
                  {{droptext}}<i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">消火栓</el-dropdown-item>
                  <el-dropdown-item command="2">地名</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-autocomplete v-show="localSearch=='1'" style="width:180px;"
                               class="search-select" popper-class="propper-class" v-model="selectBuildId" :fetch-suggestions="querySearch" placeholder="请输入关键词" @select="handleSelect" clearable>
              </el-autocomplete>
              <el-select
                style="width:180px"
                v-show="localSearch=='2'"
                v-model="searchAddressKw"
                filterable
                clearable
                remote
                reserve-keyword
                placeholder="请输入地址"
                :remote-method="remoteMethod"
                @change="selectedAddress"
                value-key="location"
                :loading="loading">
                <el-option
                  v-for="(item,index) in searchAddressList"
                  :key="index"
                  :label="item.name"
                  :value="item">
                  <span>{{ item.name }}</span>
                  <span style="color: #999; font-size: 12px">{{ item.district }}</span>
                </el-option>
              </el-select>
            </div>
            <div class="map-tool__left">
              <div class="map-tool-sensors" :class="{toolsexpand:isExpand}" @click="changeIt">
                <i class="class-icon-show">
                  <icon-svg icon-class="show" style="fill:#50E3C2" />
                </i>
                <i class="class-icon-hide">
                  <icon-svg icon-class="hide" style="fill:#50E3C2" />
                </i>
                报警列表
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <planDialog :Show.sync="realtimePointShow" :id.sync="hydrantId" :channelId.sync="channelId"></planDialog>
    <el-dialog title="处理提示"
               :visible.sync="isdelalram"
               :show-close='false'
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               custom-class="xf-jc-dialog" width="360px" height="160px">
      <div class="xf-jc-deletect">
        <p>当前故障确认已处理吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handleSure(rowsId)">确定</el-button>
        <el-button size="mini" type="text" @click="isdelalram=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import clip from '@/utils/clipboard' // use clipboard directly
  import planDialog from './components/outdoorPosition';
  import maphyrantList from './components/hydrantList'
  import {
    hydrantStatus,
    // eslint-disable-next-line no-unused-vars
    getUnhandleList,
    hydrantRecordlist,
    hydrantRsolve,
    getAllTenant,
    getTenantPos,
    hydrantPoslist,
    getMaxAlarm
  } from '@/api/datahandler/deviceAbnormal/index';

  import { AMapManager } from 'vue-amap';

  const amapManager = new AMapManager();
  let cluster;
  export default {
    name: 'hydrantindex',
    components: { planDialog, maphyrantList },
    data() {
      const self = this;
      return {
        hydrantId: '',
        droptext: '消火栓',
        showCircle: false,
        isSelectMode: true,
        isdelalram: false,
        rowsId: '',
        alarmtype: '1',
        total: null,
        totalStatus: {},
        listQuery: {
          page: 1,
          limit: 20,
          alrmCategory: 1
        },
        unhandleItems: [],
        buildId: '',
        searchAddressKw: '',
        searchAddressList: [],
        queryParams: {
          channelId: ''
        },
        channelId: '',
        cCount: 1,
        realtimePointShow: false,
        markers: [],
        showTraffic: true,
        showhide: true,
        Trafficlay: undefined, // 实时交通图层
        rulerFn: undefined, // 测距工具
        ruleroff: true,
        mouseToolOjb: undefined, // 鼠标测量工具
        desme: undefined, // 密度计算工具
        localSearch: '1',
        input5: '',
        isExpand: true,
        buildingList: [],
        selectBuildId: '',
        selectTenant: '',
        list: [],
        loading: false,
        states: [],
        center: [114.42377, 30.50469],
        zooms: [5, 19],
        zoom: 12,
        resized: true,
        vmode: '3D',
        vrotate: 55,
        amapManager,
        clusterobj: undefined,
        events: {
          init: o => {
            o.setMapStyle('amap://styles/117f36d1e643cfd46d21660d866df29e');
            // setTimeout(()=>{
            //   AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
            //     //缩放控件
            //     o.addControl(
            //       new BasicControl.Zoom({
            //         position: "rb" //右下角缩放
            //       })
            //     );
            //   });
            // },2000);

            const _map = amapManager.getMap();
            _map.on('complete', () => {
              self.getMapCenter()
            })
          }
        },
        plugin: [
          {
            pName: 'CitySearch',
            // showMarker:false,
            events: {
              init(o) {
                // o.getLocalCity(function (status, result) {
                //   if (status === 'complete' && result.info === 'OK') {
                //     if (result && result.city && result.bounds) {
                //       var citybounds = result.bounds;
                //       let map = amapManager.getMap();

                //       map.setBounds(citybounds);
                //       map.setZoom(12.2)

                //     }
                //   }
                // })
              }
            }
          },
          {
            pName: 'Scale',
            events: {}
          }
        ]
      };
    },
    mounted() {
      this.fetchData();
      // 页面高度
      const mapmainHeight = document
        .querySelector('.sidebar-container')
        .getBoundingClientRect().height;

      // map高度
      const mapHeight = mapmainHeight;
      document.querySelector('#hymapmain').style.height = mapHeight + 'px';

      // 右侧传感器列表高度

      document.querySelector('.untreated-list').style.height = mapHeight - 220 + 'px';
      // 建筑物跟进ws触发更新
      const ele = this;
      this.bus.$on('getBuildingStatus', val => {
        ele.getBuildList(ele.queryParams);
      })
    },
    beforeDestroy() {
      this.bus.$off('getBuildingStatus');
    },
    methods: {
      getMapCenter() {
        getMaxAlarm(this.queryParams).then(res => {
          this.center = res.data.gis.split(',')
        })
      },
      handleCopy(text, event) {
        clip(text + '', event)
      },
      selectHandle(command) {
        this.localSearch = command;
        if (command === '1') {
          this.droptext = '消火栓'
        } else if (command === '2') {
          this.droptext = '地名'
        }
      },
      checkMore() {
        const rootPath = this.$route.matched[0];
        if (rootPath.path === '') {
          this.$router.push('/gailan/exceptionRecord')
        } else {
          // 加载更多修改
          const lastPath = this.queryParams.channelId !== undefined ? '/' + this.queryParams.channelId : ''
          this.$router.push(rootPath.path + '/exceptionRecord' + lastPath)
        }
      },
      initPage() {
        this.listQuery.page = 1;
        this.listQuery.limit = 20;
      },
      handleRows(rowId) {
        this.isdelalram = true;
        this.rowsId = rowId;
      },
      handleSure() {
        hydrantRsolve(this.$qs.stringify({ id: this.rowsId })).then(res => {
          if (res.status === 200) {
            this.$notify({
              title: '成功',
              message: '处理成功',
              type: 'success',
              duration: 2000
            });
            this.isdelalram = false;
            this.getUnhandleL();
          }
        }).catch(res => {
          this.$notify({
            title: '提示',
            message: '网络异常！',
            type: 'warning',
            duration: 2000
          });
          this.isdelalram = false;
        })
      },
      handleCurrentChange(val) {
        //  简版翻页
        this.listQuery.page = val;
        this.getUnhandleL();
      },
      changeMode(type) {
        // this.isExpand=false;
        switch (type) {
          case 'map':
            this.isSelectMode = true;
            this.isExpand = true;
            hydrantStatus(this.queryParams).then(res => {
              this.totalStatus = res.data;
            })
            this.getUnhandleL()
            break;
          case 'list':
            this.isSelectMode = false;
            this.isExpand = false;
            break;
        }
      },
      fetchData() {
        // 修复高德地图加载的bug
        if (localStorage.getItem('logined')) {
          const addStorage = localStorage.getItem('logined');
          this.clearMapstore()
          localStorage.setItem('logined', addStorage);
        } else {
          this.clearMapstore()
        }
        this.channelId = this.$route.params.id;
        this.queryParams.channelId = this.$route.params.id;
        this.getBuildList(this.queryParams);
        this.isExpand = true;
        this.changeMode('map');
      },
      getBuildList(query) {
        // 初始化查询当前地图下的消火栓
        const self = this;
        hydrantPoslist(query).then(res => {
          this.states = res.data;
          this.markers = res.data;
          const markers = [];
          for (let i = 0; i < this.markers.length; i++) {
            markers.push({
              position: [this.markers[i].gisx, this.markers[i].gisy],
              id: this.markers[i].id,
              label: this.markers[i].name,
              protectionRadius: this.markers[i].protectionRadius,
              status: this.markers[i].status
            });
          }
          this.markers = [];
          this.markers = markers;
        });
      },
      changeIt() {
        this.isExpand = !this.isExpand;
        // 展开列表请求
        if (this.isExpand) {
          this.getUnhandleL()
        }
      },
      getUnhandleL() {
        // 加载未处理列表
        this.loading = true;
        hydrantRecordlist(Object.assign(this.listQuery, this.queryParams)).then(res => {
          this.loading = false;
          this.total = res.data.total;
          this.unhandleItems = res.data.rows;
        })
      },
      showSensor(val) {
        this.hydrantId = val;
        this.realtimePointShow = true;
      },
      selectedAddress(item) {
        const lnglat = item.location;
        const self = this;
        if (lnglat) {
          this.center = [lnglat.lng, lnglat.lat];
        } else {
          const o = amapManager.getMap();
          o.setCity(item.name, () => {
            self.zoom = 12;
          });
        }
        // 关闭测距
        if (this.rulerFn) {
          this.rulerFn.turnOff();
        }
        this.zoom = 19;
      },
      remoteMethod(pois) {
        const self = this;
        // 选择之后的列表
        AMap.plugin(['AMap.Autocomplete'], () => {
          const autoOptions = {
            city: '' // 城市，默认全国
          }
          const autoComplete = new AMap.Autocomplete(autoOptions)
          autoComplete.search(pois, (status, result) => {
            // 搜索成功时，result即是对应的匹配数据
            if (result) {
              const results = result.tips;
              if (results) {
                self.searchAddressList = results;
              }
            }
          })
        })
      },
      // 地图下拉操作集合
      handleCommand(command) {
        if (command === 'showtrafic') {
          if (this.showTraffic) {
            const o = amapManager.getMap();
            const trafficLayer = new AMap.TileLayer.Traffic();
            trafficLayer.setMap(o);
            this.Trafficlay = trafficLayer;
            this.showTraffic = false;
          } else {
            // 非第一次显示路况
            if (this.showhide) {
              this.Trafficlay.hide();
              this.showhide = false;
            } else {
              this.Trafficlay.show();
              this.showhide = true;
            }
          }
        } else if (command === 'showpich') {
          const self = this;
          if (this.ruleroff) {
            // 显示测距工具
            const o = amapManager.getMap();

            o.plugin(['AMap.RangingTool'], () => {
              const ruler = new AMap.RangingTool(o);

              ruler.turnOn();

              self.$nextTick();

              self.rulerFn = ruler;
              self.ruleroff = false;
            });
          } else {
            self.rulerFn.turnOff();
            self.ruleroff = true;
          }
        } else if (command === 'showcircle') {
          this.showCircle = !this.showCircle;
        } else if (command === 'showDensity') {
          const self = this;

          const o = amapManager.getMap();
          if (!this.desme) {
            o.plugin(['AMap.MouseTool'], () => {
              const mouseTool = new AMap.MouseTool(o);
              self.desme = mouseTool;
              // 鼠标工具插件添加draw事件监听
              AMap.event.addListener(mouseTool, 'draw', e => {
                const eObject = e.obj; // obj属性就是鼠标事件完成所绘制的覆盖物对象。

                const polygon = new AMap.Polygon({
                  path: eObject.getPath(),
                  extData: '99'
                });

                let num = 0;
                const allShowDevices = self.markers;
                for (let i = 0; i < allShowDevices.length; i++) {
                  const position = allShowDevices[i].position;
                  const count = allShowDevices[i].count;
                  if (polygon.contains(position) == true)
                  // 目前是建筑物传感器数量
                  { num += count; }
                }

                const size = (polygon.getArea() / 1000000).toFixed(2);
                // let info = `面积:  ${size} 平方公里，数量为:  ${num} 栋`;
                let info;
                if (num > 0) { info = '密度为：' + (num / size).toPrecision(4) + '个/平方公里'; } else info = '无传感器';
                setTimeout(() => {
                  document
                    .querySelectorAll('.amap-marker-content>div')
                    .forEach(item => {
                      if (item.children.length < 1) {
                        if (!item.getAttribute('id')) {
                          item.setAttribute('id', 'amcM-' + self.cCount++);
                          item.innerText = info;
                        }
                      }
                    });
                }, 200);
              });
              mouseTool.measureArea(); // 调用鼠标工具的面积量测功能
            });
          } else {
            window.location.reload();
          }
        }
      },
      querySearch(queryString, cb) {
        // 搜索操作
        if (queryString == '') { cb([]); } else {
          hydrantPoslist(Object.assign({}, this.queryParams, { hydrantName: queryString })).then(res => {
            const buildings = res.data;
            if (buildings.length == 0) { cb([]); } else {
              const buildarr = [];
              buildings.forEach(build => {
                buildarr.push({ value: build.name, id: build.id })
                cb(buildarr);
              })
            }
          })
        }
      },
      createFilter(queryString) {
        return restaurant => restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      },
      freshCenter(pos) {
        this.center = [pos.gisx, pos.gisy];
        this.zoom = 19;
        // 关闭测距
        if (this.rulerFn) {
          this.rulerFn.turnOff();
        }
      },
      handleSelect(build) {
        const selectedBuild = this.states.find(item => item.id === build.id);
        if (selectedBuild) {
          this.freshCenter(selectedBuild);
        }
      }
    },
    watch: {
      $route: 'fetchData'
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .inner-swtich{
    position: relative;
    top: -1px;
    margin-left: 5px;
  }
  .loadmore-btn-goto{
    text-align: center;
  }
  .map-mode-pannel,.list-mode-pannel,.untreated-list{
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .dropdwon-svg-icon {
    margin-right: 10px;
  }
  .amap-geolocation-con {
    left: auto !important;
    right: 30px;
    bottom: 107px !important;
    z-index: auto !important;
  }
  .amap-ui-control-zoom {
    width: 35px !important;
  }
  #hymapmain {
    overflow: hidden;
    position: relative;
    .map-mode-pannel{
      display: none;
      height: 100%;
      &.map-pannel-show{
        display: block;
      }
    }
    .list-mode-pannel{
      width:100%;
      height:100%;
      display: none;
      &.list-pannel-show{
        display: block;
      }
    }
  }
  .mapset {
    height: 100%;
    .amap-logo {
      display: none !important;
    }
    .amap-copyright {
      visibility: hidden !important;
    }
    .amap-ui-control-position-rb{
      background: #fff;
    }
    .hymap-marker-wrap {
      .hymain-map-marker {
        display: inline-block;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border:2px solid #fff;
        position: relative;
        text-align: center;
        vertical-align: middle;
        .svg-icon{
          position: relative;
          top: 2px;
        }
        &.hymain-map-marker__normal {
          background: #2683F5;
        }
        &.hymain-map-marker__abnormal {
          background: #F5A623;
        }
      }
    }
  }
  .hymap-tool {
    position: absolute;
    top: 73px;
    right: 0;
    height: calc(100vh - 73px);
    .map-bshow-wrap{
      line-height: 36px;
      padding: 0;
      &>span{
        i{
          display: inline-block;
          width:20px;
          height: 20px;
          border-radius: 50%;
          margin: 0 10px;
          text-align: center;
          vertical-align: middle;
          .svg-icon{
            vertical-align: middle;
            position: relative;
            top: -10px;
          }
        }
      }
      .css-icon-warning {
        background: #f5a623;
      }
      .css-icon-breakdown {
        background: #2683f5;
      }
    }
    .map-tool__left {
      float: right;
      display: flex;
    }
    .map-tool__right {
      box-sizing: border-box;
      padding-left: 0;
      width: 0px;
      float: right;
      transition: width 0.3s;
      .icon-nf-copy{
        float: right;
        cursor: pointer;
        padding-right: 10px;
        position: relative;
        .icon-nf-copy-btn{
          position: absolute;
          opacity: 0;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }
      &.toolspannel {
        width: 350px;
        height: calc(100vh - 51px);
        padding-left: 10px;
        padding-right: 10px;
        transition: width 0.3s;
        .map-tool-rightwrap{
          height: 100%;
          position: relative;
          .unhandle-list{
            width: 100%;
            margin-top: 14px;
            .el-radio-button{
              width: 35%;
              .el-radio-button__inner{
                width: 100%;
              }
            }
          }
          .untreated-list{
            position: relative;
            background: linear-gradient(-140deg, transparent 2em, rgba(0, 0, 0, 0.6) 0);
            .none-list{
              font-size: 14px;
              text-align: center;
              margin: 0;
              line-height: 4;
              color: rgba(255, 255, 255,.5);
            }
            .untreated-list-item{
              margin: 0 20px;
              padding-top: 5px;
              margin-top: 10px;
              border-bottom: 1px solid rgba(80, 227, 194, 0.3);
              &:after{
                opacity: 0.3;
              }
              &:before{
                opacity: 0.3;
              }
              dt{
                font-size: 14px;
                font-weight: bold;
                color: #50E3C2;
                padding: 5px 0;
                i{
                  color: #8E9098;
                  font-size: 16px;
                  margin-right: 10px;
                  vertical-align: text-top;
                }
              }
              dd{
                margin: 0;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.7);
                padding: 5px 0;
                padding-left: 23px;
                .untreated-sensor-detail{
                  display: flex;
                  div{
                    padding: 4px 10px;
                    font-size: 12px;
                    background: linear-gradient(-130deg, transparent 0.6em, rgba(226, 96, 41, 0.7) 0);
                    border-radius: 2px;
                    margin-right: 5px;
                    &.measuringPoint{
                      background: linear-gradient(-130deg, transparent 0.6em, rgba(80, 227, 194, 0.4) 0);
                    }
                  }
                  &.abnormal-detail{
                    div{
                      background: linear-gradient(-130deg, transparent 0.6em, rgba(245, 166, 35, 0.7) 0);
                      &.measuringPoint{
                        background: linear-gradient(-130deg, transparent 0.6em, rgba(80, 227, 194, 0.4) 0);
                      }
                    }
                  }
                }
                &.untreated-handle{
                  .el-button--text{
                    font-size: 14px;
                    color: #50E3C2;
                  }
                  .el-icon-back{
                    margin-left: 5px;
                    transform: rotate(180deg)
                  }
                }
              }
            }
          }
        }
        .all-sensor-list{
          display: flex;
          text-align: center;
          border-bottom: 1px solid #50E3C2;
          margin-top:12px;
          .all-sensor-list__item{
            flex: 1;
            font-size: 14px;
            color: rgba(80, 227, 194, 0.6);
            &.all-sensor-line{
              padding: 0 10px;
              position: relative;
            }
            p{
              margin: 0;
            }
            .count{
              font-size: 40px;
              font-family: 'digital';
              text-shadow:0px 0px 5px currentColor;
            }
          }
        }
      }
    }
  }
</style>
